<!--
 * @Descripttion: 会员基础设置
 * @Author: xiao li
 * @Date: 2020-07-06 12:17:07
 * @LastEditors: xiao li
 * @LastEditTime: 2021-06-01 16:31:22
-->
<template>
  <div class="lb-edit-card">
    <top-nav :isBack="true"></top-nav>
    <div class="page-main">
      <el-tabs type="border-card" v-model="activeName" @change="changeTabs">
        <el-tab-pane label="会员基础设置" name="vip">
          <div class="space-lg"></div>
          <el-form
            @submit.native.prevent
            :model="vipForm"
            :rules="vipFormRules"
            ref="vipForm"
            label-width="180px"
            class="basic-form"
          >
            <el-form-item label="是否启用会员" prop="status">
              <el-radio-group v-model="vipForm.status">
                <el-radio :label="1">{{$t('action.ON')}}</el-radio>
                <el-radio :label="0">{{$t('action.OFF')}}</el-radio>
              </el-radio-group>
              <lb-tool-tips>{{vipForm.status === 0 ?'关闭会员则会关闭现有会员的相关权益，请谨慎操作！' :'开启会员功能，将会在小程序【个人中心 - 用户信息】模块处显示等级会员'}}</lb-tool-tips>
            </el-form-item>

            <el-form-item>
              <lb-button @click="submitFormInfo('vipForm')" type="primary">{{$t('action.submit')}}</lb-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="成长值设置" name="growup">
          <div class="space-lg"></div>
          <el-form
            @submit.native.prevent
            :model="growupForm"
            :rules="growupFormRules"
            ref="growupForm"
            label-width="180px"
            class="basic-form"
          >
            <el-form-item label="成长值展示名称" prop="growth_title">
              <el-input
                v-model="growupForm.growth_title"
                type="text"
                maxlength="10"
                show-word-limit
                placeholder="请输入自定义名称，不输入则默认【成长值】"
              ></el-input>
              <lb-tool-tips>例如淘宝【淘气值】，京东【京享值】</lb-tool-tips>
            </el-form-item>
            <el-form-item label="成长值设置" prop="growth_cash">
              <el-input placeholder v-model="growupForm.growth_cash">
                <template slot="prepend">每消费1元增加</template>
                <template slot="append">成长值</template>
              </el-input>
            </el-form-item>
            <el-form-item label prop="growth_order">
              <el-input placeholder v-model="growupForm.growth_order">
                <template slot="prepend">每下1笔订单增加</template>
                <template slot="append">成长值</template>
              </el-input>
              <lb-tool-tips mode="text"><div class="c-warning">成长值设置修改即时生效，对以往数据不产生影响</div></lb-tool-tips>
            </el-form-item>
            <el-form-item label="成长值获取限制" prop="growth_limit">
              <el-radio-group v-model="growupForm.growth_limit">
                <el-radio :label="1">限制</el-radio>
                <el-radio :label="0">不限制</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label prop="growth_day_max" v-if="growupForm.growth_limit === 1">
              <el-input placeholder="0 至 9999999" v-model="growupForm.growth_day_max">
                <template slot="prepend">每日最多获得</template>
                <template slot="append">成长值</template>
              </el-input>
            </el-form-item>
            <el-form-item>
              <lb-button
                @click="submitFormInfo('growupForm')"
                type="primary"
              >{{$t('action.submit')}}</lb-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="积分设置" name="integral">
          <div class="space-lg"></div>
          <el-form
            @submit.native.prevent
            :model="integralForm"
            :rules="integralFormRules"
            ref="integralForm"
            label-width="180px"
            class="basic-form"
          >
            <el-form-item label="积分展示名称" prop="integral_title">
              <el-input
                v-model="integralForm.integral_title"
                type="text"
                maxlength="10"
                show-word-limit
                placeholder="请输入自定义名称，不输入则默认【积分】"
              ></el-input>
              <lb-tool-tips>例如天猫【天猫积分】</lb-tool-tips>
            </el-form-item>
            <el-form-item label="积分设置" prop="integral_cash">
              <el-input placeholder v-model="integralForm.integral_cash">
                <template slot="prepend">每消费1元获得</template>
                <template slot="append">积分</template>
              </el-input>
             <lb-tool-tips mode="text"><div class="c-warning">积分设置修改即时生效，对以往数据不产生影响，购买商品获得积分将在确认收货之后核算</div></lb-tool-tips>
            </el-form-item>
            <el-form-item label="积分获取限制" prop="integral_limit">
              <el-radio-group v-model="integralForm.integral_limit">
                <el-radio :label="1">限制</el-radio>
                <el-radio :label="0">不限制</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label prop="integral_day_max" v-if="integralForm.integral_limit === 1">
              <el-input placeholder="0 至 9999999" v-model="integralForm.integral_day_max">
                <template slot="prepend">每日最多获得</template>
                <template slot="append">积分</template>
              </el-input>
            </el-form-item>
            <el-form-item>
              <lb-button
                @click="submitFormInfo('integralForm')"
                type="primary"
              >{{$t('action.submit')}}</lb-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="储值设置" name="stored">
          <div class="space-lg"></div>
          <el-form
            @submit.native.prevent
            :model="storedForm"
            :rules="storedFormRules"
            ref="storedForm"
            label-width="180px"
            class="basic-form"
          >
            <div style="height:30px"></div>
            <el-form-item label="储值返佣规则" prop="commission_type">
              <el-radio-group v-model="storedForm.commission_type">
                <el-radio :label="0">不返佣</el-radio>
                <el-radio :label="1">充值时</el-radio>
                <el-radio :label="2">消费时</el-radio>
                <el-radio :label="3">充值和消费时</el-radio>
              </el-radio-group>
              <lb-tool-tips>
                <p v-if="storedForm.commission_type === 0">充值时和消费时均不返佣</p>
                <p v-if="storedForm.commission_type === 1">用户购买充值套餐时，按照购买金额返佣给推荐人</p>
                <p v-if="storedForm.commission_type === 2">用户使用储值支付时，按照商品分佣规则返佣给成交人/上级</p>
                <div v-if="storedForm.commission_type === 3">
                  <p>用户购买充值套餐时，按照购买金额返佣给推荐人</p>
                  <p>用户使用储值支付时，按照商品分佣规则返佣给成交人/上级</p>
                </div>
              </lb-tool-tips>
            </el-form-item>
            <div v-if="storedForm.commission_type === 1 || storedForm.commission_type === 3">
            <el-form-item label="选择充值返佣人">
              <el-select v-model="storedForm.commission_user" multiple filterable clearable placeholder="请选择">
                <el-option
                  v-for="item in commissionSelect"
                  :key="item.value"
                  :label="item.name"
                  :value="item.value"
                ></el-option>
              </el-select>
              <lb-tool-tips>只控制购买套餐能得到返佣的角色，不能控制消费返佣的角色，消费返佣默认返给上级，不论角色</lb-tool-tips>
            </el-form-item>
            <el-form-item
              label="购买套餐返佣金额"
              prop="commission_price_type"
            >
              <div class="flex-warp">
                <el-select v-model="storedForm.commission_price_type" style="width:190px">
                  <el-option
                    v-for="item in priceSelect"
                    :key="item.id"
                    :label="item.title"
                    :value="item.id"
                  ></el-option>
                </el-select>
                <el-input
                  placeholder
                  v-model="storedForm.commission_balance"
                  style="width:200px;margin-left:10px"
                  v-if="storedForm.commission_price_type === 0"
                >
                  <template slot="append">%</template>
                </el-input>
                <el-input
                  placeholder
                  v-model="storedForm.commission_price"
                  style="width:200px;margin-left:10px"
                  v-if="storedForm.commission_price_type === 1"
                >
                  <template slot="append">元</template>
                </el-input>
              </div>
              <lb-tool-tips>满足充值返佣人的角色可分享充值页面，用户充值之后，分享者将得到佣金，百分比分成则以购买价格计算</lb-tool-tips>
            </el-form-item>
            </div>
            <div v-if="storedForm.commission_type === 2 || storedForm.commission_type === 3">
              <el-form-item label="储值人工扣款返佣" prop="commission_Manual_status">
                <el-radio-group v-model="storedForm.commission_Manual_status">
                  <el-radio :label="1">{{$t('action.ON')}}</el-radio>
                  <el-radio :label="0">{{$t('action.OFF')}}</el-radio>
                </el-radio-group>
                <lb-tool-tips>人工扣款包括：后台储值扣款，小程序员工储值扣款，佣金将返给此消费用户的上级</lb-tool-tips>
              </el-form-item>
              <el-form-item prop="commission_Manual_balance" v-show="storedForm.commission_Manual_status === 1">
                <el-input placeholder v-model="storedForm.commission_Manual_balance">
                  <template slot="prepend">按照扣款金额</template>
                  <template slot="append">%</template>
                </el-input>
              </el-form-item>
            </div>
            <el-form-item>
              <lb-button @click="submitFormInfo('storedForm')" type="primary">{{$t('action.submit')}}</lb-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    let validateInt = (rule, value, callback) => {
      if (!/^\+?[0-9]*$/.test(value)) {
        callback(new Error('请输入非负整数'))
      } else {
        callback()
      }
    }
    let validateIntMax = (rule, value, callback) => {
      if (!/^\+?[0-9]*$/.test(value)) {
        callback(new Error('请输入非负整数'))
      } else if (value * 1 < 1 || value * 1 > 9999998) {
        callback(new Error('请输入大于0且小于9999999的整数'))
      } else {
        callback()
      }
    }
    let validateIntPriceType = (rule, value, callback) => {
      if (this.storedForm.commission_type === 1 || this.storedForm.commission_type === 3) {
        if (this.storedForm.commission_price_type === 0) {
          if (!this.storedForm.commission_balance) {
            this.storedForm.commission_balance = 0
          }
          let value = this.storedForm.commission_balance
          if (!/^(?:0|[1-9][0-9]?|100)$/.test(value)) {
            callback(new Error('请输入0至100的整数'))
          } else {
            callback()
          }
        } else if (this.storedForm.commission_price_type === 1) {
          if (!/^(([0-9][0-9]*)|(([0]\.\d{1,2}|[1-9][0-9]*\.\d{1,2})))$/.test(this.storedForm.commission_price) || this.storedForm.commission_price < 0.01) {
            callback(new Error('请输入正确的金额，最多保留两位小数'))
          } else {
            callback()
          }
        }
      } else {
        callback()
      }
    }
    let validateIntManualBalance = (rule, value, callback) => {
      if (this.storedForm.commission_Manual_status === 1) {
        let value = this.storedForm.commission_Manual_balance
        if (!/^(?:0|[1-9][0-9]?|100)$/.test(value)) {
          callback(new Error('请输入0至100的整数'))
        } else {
          callback()
        }
      } else {
        callback()
      }
    }

    return {
      navTitle: '',
      activeName: 'vip',
      vipForm: {
        status: ''
      },
      growupForm: {
        growth_title: '',
        growth_cash: '',
        growth_order: '',
        growth_limit: '',
        growth_day_max: ''
      },
      integralForm: {
        integral_title: '',
        integral_cash: '',
        integral_limit: '',
        integral_day_max: ''
      },
      vipFormRules: {
        status: {
          required: true,
          type: 'number',
          message: '请选择',
          trigger: 'change'
        }
      },
      growupFormRules: {
        growth_cash: {
          required: true,
          validator: validateInt,
          trigger: 'blur'
        },
        growth_order: {
          required: true,
          validator: validateInt,
          trigger: 'blur'
        },
        growth_limit: {
          required: true,
          type: 'number',
          message: '请选择',
          trigger: 'change'
        },
        growth_day_max: {
          required: true,
          validator: validateIntMax,
          trigger: 'blur'
        }
      },
      integralFormRules: {
        integral_cash: {
          required: true,
          validator: validateInt,
          trigger: 'blur'
        },
        integral_limit: {
          required: true,
          type: 'number',
          message: '请选择',
          trigger: 'change'
        },
        integral_day_max: {
          required: true,
          validator: validateIntMax,
          trigger: 'blur'
        }
      },
      priceSelect: [
        {
          id: 0,
          title: '百分比分成'
        },
        {
          id: 1,
          title: '固定分成'
        }
      ],
      commissionSelect: [],
      storedForm: {
        commission_type: 0,
        commission_user: [],
        commission_price_type: 0,
        commission_price: '',
        commission_balance: '',
        commission_Manual_status: 0,
        commission_Manual_balance: ''
      },
      storedFormRules: {
        commission_type: {required: true},
        commission_Manual_status: {required: true},
        commission_price_type: {
          required: true,
          validator: validateIntPriceType,
          trigger: 'blur'
        },
        commission_Manual_balance: {
          required: true,
          validator: validateIntManualBalance,
          trigger: 'blur'
        }
      }
    }
  },
  async created () {
    await this.getCommission()
    await this.getConfig()
  },
  methods: {
    async getCommission () {
      let {code, data} = await this.$api.memberCommissionSelect()
      if (code !== 200) return
      this.commissionSelect = data
    },
    async getConfig () {
      let { data } = await this.$api.memberConfigInfo()
      console.log('data', data)

      for (let key in this.vipForm) {
        this.vipForm[key] = data[key]
      }
      for (let key in this.growupForm) {
        this.growupForm[key] = data[key]
      }
      for (let key in this.integralForm) {
        this.integralForm[key] = data[key]
      }
      for (let key in this.storedForm) {
        if (typeof (data.commission_user) === 'object' && data.commission_user.length > 0) {
          data.commission_user = data.commission_user.map(item => {
            return item * 1
          })
        }
        this.storedForm[key] = data[key]
      }

      if (!data.growth_day_max || data.growth_day_max * 1 < 1) {
        this.growupForm.growth_day_max = 1
      }
      if (!data.integral_day_max || data.integral_day_max * 1 < 1) {
        this.integralForm.integral_day_max = 1
      }
    },
    async submitFormInfo (name) {
      let subForm = this[name]
      this.$refs[name].validate((valid) => {
        if (!valid) return
        if (name === 'growupForm') {
          subForm.growth_title = subForm.growth_title || '成长值'
          subForm.growth_cash = subForm.growth_cash * 1
          subForm.growth_order = subForm.growth_order * 1
          subForm.growth_day_max = subForm.growth_day_max * 1
        }
        if (name === 'integralForm') {
          subForm.integral_title = subForm.integral_title || '积分'
          subForm.integral_cash = subForm.integral_cash * 1
          subForm.integral_day_max = subForm.integral_day_max * 1
        }
        this.$api.memberConfigUpdate(subForm).then((res) => {
          if (res.code === 200) {
            this.$message.success(this.$t('tips.successSub'))
          } else {
            this.getConfig()
          }
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.lb-edit-card {
  width: 100%;
  .el-input,
  .el-select,
  .lb-input-number,
  .el-cascader,
  .el-textarea {
    width: 400px;
  }
}
</style>
